<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>get with query string</h3>
    <!--当前页面访问路径：/[contextPath应用上下文路径]/request.html，需要跳转到/[contextPath]/request-->
    <!--也可以在url输入链接跳转后相同的url绝对路径来访问-->
    <a href="request?username=abc&password=123">get</a>
    <br>
    <hr>
    
    <!--form表单提交，没有设置请求方法，默认是get,会把form中的控件以name为键，输入/选择的内容为值，设置到queryString-->
    <form action="request">
        <input type="text" name="username" placeholder="输入用户名">
        <br>
        <input type="password" name="password" placeholder="输入密码">
        <br>
        <input type="submit" value="提交">
    </form>

    <hr>

    <h3>表单格式：/request</h3>
    <form action="request" method="post">
        <input type="text" name="username" placeholder="输入用户名">
        <br>
        <input type="password" name="password" placeholder="输入密码">
        <br>
        <input type="submit" value="提交">
    </form>

    <hr>

    <h3>form-data格式：/form-data-servlet</h3>
    <form action="form-data-servlet"  enctype="multipart/form-data" method="post"><!--enctype是请求数据的格式-->
        <input type="text" name="username" placeholder="输入用户名">
        <br>
        <input type="password" name="password" placeholder="输入密码">
        <br>
        <!--input type=file为上传文件，accept为选择上传的文件类型-->
        选择头像：<input type="file" name="head" accept="image/*"><!--因为文件是二进制数据，所以这里获取不到-->
        <br>
        <input type="submit" value="提交">
    </form>

    <hr>

    <h3>ajax提交json格式</h3>
    <input type="text" id="ajax_username" placeholder="输入用户名">
    <br>
    <input type="password" id="ajax_password" placeholder="输入密码">
    <br>
    <button onclick="ajaxSubmit()">提交</button>
</body>
<script>
    function ajaxSubmit(){
        let username = document.querySelector("#ajax_username");
        let password = document.querySelector("#ajax_password");
        let json = {
            username: username.value,//键为username，值为对象的value属性
            password: password.value,
        };
        ajax({
            url: "ajax-json-servlet",
            method: "post",
            //body上为json格式的字符串
            contentType: "application/json",
            // JSON.stringify是将一个json对象序列化为一个字符串，格式是json格式
            body: JSON.stringify(json),
            callback: function(status, resp){
                alert("后端返回的内容："+resp);//alert是弹出窗
            }
        });
    }

    function ajax(args){//var ajax = function(){}
        let xhr = new XMLHttpRequest();
        // 设置回调函数
        xhr.onreadystatechange = function(){
            // 4: 客户端接收到响应后回调
            if(xhr.readyState == 4){
                // 回调函数可能需要使用响应的内容，作为传入参数
                args.callback(xhr.status, xhr.responseText);
            }
        }
        xhr.open(args.method, args.url);
        //如果args中，contentType属性有内容，就设置Content-Type请求头
        if(args.contentType){//js中，if判断，除了判断boolean值，还可以判断字符串，对象等，有值就为true
            xhr.setRequestHeader("Content-Type", args.contentType);
        }
        //如果args中，设置了body请求正文，调用send(body)
        if(args.body){
            xhr.send(args.body);
        }else{//如果没有设置，调用send()
            xhr.send();
        }
    }
</script>
</html>